<template>
  <div class="register-container">
    <div class="register-box">
      <div class="register-header">
        <div class="logo">
          <img src="@/assets/logo/apartment-logo.svg" alt="logo">
          <span class="title">智慧公寓管理系统</span>
        </div>
        <p class="subtitle">注册账户，开启智慧公寓管理之旅</p>
      </div>
      
      <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
        <el-form-item prop="nickName">
          <el-input 
            v-model="registerForm.nickName" 
            type="text" 
            size="large" 
            auto-complete="off" 
            placeholder="请输入昵称"
            class="register-input"
          >
            <template #prefix><el-icon><User /></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="account">
          <el-input 
            v-model="registerForm.account" 
            size="large" 
            auto-complete="off" 
            placeholder="请输入手机号或邮箱"
            class="register-input"
          >
            <template #prefix><el-icon><Message /></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            size="large" 
            auto-complete="off"
            placeholder="请输入密码"
            class="register-input"
            @keyup.enter="handleRegister"
          >
            <template #prefix><el-icon><Lock /></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            type="password"
            size="large" 
            auto-complete="off"
            placeholder="请再次确认密码"
            class="register-input"
            @keyup.enter="handleRegister"
          >
            <template #prefix><el-icon><Lock /></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code" v-if="captchaEnabled" class="captcha-item">
          <el-input
            size="large" 
            v-model="registerForm.code"
            auto-complete="off"
            placeholder="验证码"
            class="register-input captcha-input"
            @keyup.enter="handleRegister"
          >
            <template #prefix><el-icon><Key /></el-icon></template>
          </el-input>
          <div class="register-code">
            <img :src="codeUrl" @click="getCode" class="register-code-img"/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="loading"
            size="large" 
            type="primary"
            class="register-button"
            @click.prevent="handleRegister"
          >
            {{ loading ? '注册中...' : '立即注册' }}
          </el-button>
          <div class="login-link">
            <router-link class="link-type" :to="'/login'">已有账户？立即登录</router-link>
          </div>
        </el-form-item>
      </el-form>

      <div class="register-footer">
        <div class="footer-links">
          <span>© 2024 智慧公寓管理系统</span>
          <span class="divider">|</span>
          <span>技术支持</span>
        </div>
      </div>
    </div>
    
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
  </div>
</template>

<script setup>
import { User, Lock, Message, Key } from '@element-plus/icons-vue'
import { ElMessageBox } from "element-plus";
import { getCodeImg, register, taiRegister } from "@/api/login";

const router = useRouter();
const { proxy } = getCurrentInstance();

const registerForm = ref({
  nickName: "",
  account: '',
  password: "",
  confirmPassword: "",
  code: "",
  uuid: ""
});

const equalToPassword = (rule, value, callback) => {
  if (registerForm.value.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const registerRules = {
  nickName: [
    { required: true, trigger: "blur", message: "请输入您的昵称" },
    { min: 2, max: 20, message: "昵称长度必须介于 2 和 20 之间", trigger: "blur" }
  ],
  account: [
    { required: true, trigger: 'blur', message: '请输入手机号或邮箱' },
    { pattern: /^(1[3|4|5|6|7|8|9][0-9]\d{8}$)|(\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$)/, message: '请输入正确的手机号或邮箱', trigger: 'blur', }
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" },
    { min: 5, max: 20, message: "密码长度必须介于 5 和 20 之间", trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, trigger: "blur", message: "请再次输入您的密码" },
    { required: true, validator: equalToPassword, trigger: "blur" }
  ],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

const codeUrl = ref("");
const loading = ref(false);
const captchaEnabled = ref(true);

function handleRegister() {
  proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      loading.value = true;
      let params = { ...registerForm.value }
      if (/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(registerForm.value.account)) {
        params.phonenumber = registerForm.value.account
      } else if (/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(registerForm.value.account)) {
        params.email = registerForm.value.account
      }
      taiRegister(params).then(res => {
        const nickName = registerForm.value.nickName;
        ElMessageBox.alert(`恭喜您，账号 ${nickName} 注册成功！`, "注册成功", {
          type: "success",
        }).then(() => {
          router.push("/login");
        }).catch(() => {});
      }).catch(() => {
        loading.value = false;
        if (captchaEnabled) {
          getCode();
        }
      });
    }
  });
}

function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      registerForm.value.uuid = res.uuid;
    }
  });
}

getCode();
</script>

<style scoped>
.register-container {
  height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  .register-box {
    width: 520px;
    padding: 50px 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;

    .register-header {
      margin-bottom: 40px;
      text-align: center;

      .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;

        img {
          height: 56px;
          margin-right: 16px;
        }

        .title {
          font-size: 28px;
          font-weight: 700;
          color: #2c3e50;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }

      .subtitle {
        color: #7f8c8d;
        font-size: 14px;
        margin: 0;
        font-weight: 400;
      }
    }

    .register-form {
      .register-input {
        margin-bottom: 20px;

        :deep(.el-input__wrapper) {
          padding: 16px 20px;
          background-color: #f8f9fa;
          border: 2px solid transparent;
          border-radius: 12px;
          box-shadow: none;
          transition: all 0.3s ease;

          &:hover {
            background-color: #e9ecef;
          }

          &.is-focus {
            background-color: #fff;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
          }
        }

        :deep(.el-input__prefix) {
          font-size: 18px;
          color: #6c757d;
        }
      }

      .captcha-item {
        display: flex;
        gap: 12px;
        
        .captcha-input {
          flex: 1;
        }

        .register-code {
          width: 120px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f8f9fa;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            background: #e9ecef;
          }

          .register-code-img {
            height: 40px;
            border-radius: 8px;
          }
        }
      }

      .register-button {
        width: 100%;
        height: 50px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        font-size: 16px;
        font-weight: 600;
        transition: all 0.3s ease;
        margin-bottom: 20px;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }

        &:active {
          transform: translateY(0);
        }
      }

      .login-link {
        text-align: center;
        
        .link-type {
          color: #667eea;
          text-decoration: none;
          font-weight: 500;
          transition: color 0.3s ease;
          
          &:hover {
            color: #764ba2;
          }
        }
      }
    }

    .register-footer {
      margin-top: 40px;
      text-align: center;

      .footer-links {
        color: #6c757d;
        font-size: 12px;
        
        .divider {
          margin: 0 8px;
        }
      }
    }
  }

  .bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: pulse 10s infinite;

      &.circle-1 {
        width: 200px;
        height: 200px;
        top: -100px;
        left: -100px;
      }

      &.circle-2 {
        width: 300px;
        height: 300px;
        top: -150px;
        right: -150px;
      }

      &.circle-3 {
        width: 400px;
        height: 400px;
        bottom: -200px;
        right: -200px;
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(0.5);
        opacity: 0.5;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(0.5);
        opacity: 0.5;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-container {
    .register-box {
      width: 90%;
      margin: 20px;
      padding: 40px 30px;

      .register-header {
        .logo {
          .title {
            font-size: 24px;
          }
        }
      }

      .register-form {
        .captcha-item {
          flex-direction: column;
          
          .register-code {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
